import React, { useState, useEffect } from 'react'
import {
  Card,
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  Select,
  message,
  Popconfirm,
  Tag,
  Tooltip,
  Row,
  Col,
  Statistic,
  Alert,
  Badge,
  Rate,
  Tree,
  Tabs,
  Upload,
  Image,
  Divider,
  Empty
} from 'antd'
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ReloadOutlined,
  DownloadOutlined,
  UploadOutlined,
  CopyOutlined,
  ExportOutlined,
  ImportOutlined,
  StarOutlined,
  EyeOutlined,
  FireOutlined,
  HeartOutlined
} from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import type { DataNode } from 'antd/es/tree'
import { ComponentLibrary, ComponentCategory, ComponentLibraryQuery, ComponentLibraryStats, PageResult } from '../../types/index'

const { Search } = Input
const { TextArea } = Input
const { TabPane } = Tabs

interface ComponentLibraryManagementProps {}

const ComponentLibraryManagement: React.FC<ComponentLibraryManagementProps> = () => {
  // 状态管理
  const [loading, setLoading] = useState(false)
  const [tableLoading, setTableLoading] = useState(false)
  const [libraries, setLibraries] = useState<ComponentLibrary[]>([])
  const [categories, setCategories] = useState<ComponentCategory[]>([])
  const [categoryTree, setCategoryTree] = useState<DataNode[]>([])
  const [stats, setStats] = useState<ComponentLibraryStats>()
  const [recommendedComponents, setRecommendedComponents] = useState<ComponentLibrary[]>([])
  const [popularComponents, setPopularComponents] = useState<ComponentLibrary[]>([])
  
  // 分页和查询
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条记录`
  })
  
  const [query, setQuery] = useState<ComponentLibraryQuery>({
    current: 1,
    size: 10
  })
  
  // 弹窗状态
  const [publishModalVisible, setPublishModalVisible] = useState(false)
  const [createModalVisible, setCreateModalVisible] = useState(false)
  const [rateModalVisible, setRateModalVisible] = useState(false)
  const [importModalVisible, setImportModalVisible] = useState(false)
  
  // 选中状态
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const [selectedLibrary, setSelectedLibrary] = useState<ComponentLibrary>()
  const [selectedCategoryId, setSelectedCategoryId] = useState<number>()
  const [activeTab, setActiveTab] = useState('all')
  
  // 表单实例
  const [publishForm] = Form.useForm()
  const [createForm] = Form.useForm()
  const [rateForm] = Form.useForm()

  // 组件类型选项
  const componentTypeOptions = [
    { label: '数据组件', value: 'DATA_COMPONENT' },
    { label: '图表组件', value: 'CHART_COMPONENT' }
  ]

  // 库类型选项
  const libraryTypeOptions = [
    { label: '系统组件', value: 'SYSTEM' },
    { label: '自定义组件', value: 'CUSTOM' }
  ]

  // 状态选项
  const statusOptions = [
    { label: '草稿', value: 'DRAFT' },
    { label: '已发布', value: 'PUBLISHED' },
    { label: '已删除', value: 'DELETED' }
  ]

  // 获取组件库列表
  const fetchLibraries = async (params: ComponentLibraryQuery = query) => {
    setTableLoading(true)
    try {
      const response = await fetch('/api/component-library/page', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(params)
      })
      
      if (response.ok) {
        const result: PageResult<ComponentLibrary> = await response.json()
        setLibraries(result.records)
        setPagination(prev => ({
          ...prev,
          current: result.current,
          total: result.total
        }))
      } else {
        message.error('获取组件库列表失败')
      }
    } catch (error) {
      console.error('获取组件库列表失败:', error)
      message.error('网络错误，请重试')
    } finally {
      setTableLoading(false)
    }
  }

  // 获取分类列表
  const fetchCategories = async () => {
    try {
      const response = await fetch('/api/component-category/tree')
      if (response.ok) {
        const result = await response.json()
        setCategories(result)
        
        // 构建树形数据
        const treeData = buildCategoryTree(result)
        setCategoryTree(treeData)
      }
    } catch (error) {
      console.error('获取分类列表失败:', error)
    }
  }

  // 构建分类树
  const buildCategoryTree = (categories: ComponentCategory[]): DataNode[] => {
    const map = new Map<number, DataNode>()
    const roots: DataNode[] = []

    categories.forEach(category => {
      map.set(category.id, {
        key: category.id,
        title: category.displayName,
        children: []
      })
    })

    categories.forEach(category => {
      const node = map.get(category.id)!
      if (category.parentId && map.has(category.parentId)) {
        const parent = map.get(category.parentId)!
        parent.children!.push(node)
      } else {
        roots.push(node)
      }
    })

    return roots
  }

  // 获取统计信息
  const fetchStats = async () => {
    try {
      const response = await fetch('/api/component-library/statistics')
      if (response.ok) {
        const result = await response.json()
        setStats(result)
      }
    } catch (error) {
      console.error('获取统计信息失败:', error)
    }
  }

  // 获取推荐组件
  const fetchRecommendedComponents = async () => {
    try {
      const response = await fetch('/api/component-library/recommended?limit=6')
      if (response.ok) {
        const result = await response.json()
        setRecommendedComponents(result)
      }
    } catch (error) {
      console.error('获取推荐组件失败:', error)
    }
  }

  // 获取热门组件
  const fetchPopularComponents = async () => {
    try {
      const response = await fetch('/api/component-library/popular?limit=6')
      if (response.ok) {
        const result = await response.json()
        setPopularComponents(result)
      }
    } catch (error) {
      console.error('获取热门组件失败:', error)
    }
  }

  // 刷新数据
  const refreshData = () => {
    fetchLibraries()
    fetchCategories()
    fetchStats()
    fetchRecommendedComponents()
    fetchPopularComponents()
  }

  // 初始化
  useEffect(() => {
    refreshData()
  }, [])

  // 表格列定义
  const columns: ColumnsType<ComponentLibrary> = [
    {
      title: '组件名称',
      dataIndex: 'displayName',
      key: 'displayName',
      width: 200,
      render: (text, record) => (
        <Space direction="vertical" size={0}>
          <span style={{ fontWeight: 500 }}>{text}</span>
          <span style={{ fontSize: '12px', color: '#666' }}>{record.name}</span>
        </Space>
      )
    },
    {
      title: '类型',
      dataIndex: 'componentType',
      key: 'componentType',
      width: 100,
      render: (type) => (
        <Tag color={type === 'DATA_COMPONENT' ? 'blue' : 'green'}>
          {type === 'DATA_COMPONENT' ? '数据组件' : '图表组件'}
        </Tag>
      )
    },
    {
      title: '分类',
      dataIndex: 'categoryName',
      key: 'categoryName',
      width: 120
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      width: 80
    },
    {
      title: '评分',
      dataIndex: 'rating',
      key: 'rating',
      width: 120,
      render: (rating) => (
        <Space>
          <Rate disabled value={rating} allowHalf />
          <span>({rating?.toFixed(1) || '0.0'})</span>
        </Space>
      )
    },
    {
      title: '使用次数',
      dataIndex: 'usageCount',
      key: 'usageCount',
      width: 100,
      render: (count) => <Badge count={count} showZero overflowCount={999} />
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        const statusMap = {
          DRAFT: { color: 'default', text: '草稿' },
          PUBLISHED: { color: 'success', text: '已发布' },
          DELETED: { color: 'error', text: '已删除' }
        }
        const config = statusMap[status as keyof typeof statusMap]
        return <Tag color={config?.color}>{config?.text}</Tag>
      }
    },
    {
      title: '标识',
      key: 'badges',
      width: 120,
      render: (_, record) => (
        <Space>
          {record.isRecommended && (
            <Tooltip title="推荐组件">
              <StarOutlined style={{ color: '#faad14' }} />
            </Tooltip>
          )}
          {record.isPublic && (
            <Tooltip title="公开组件">
              <EyeOutlined style={{ color: '#52c41a' }} />
            </Tooltip>
          )}
          {record.libraryType === 'SYSTEM' && (
            <Tooltip title="系统组件">
              <Badge color="blue" />
            </Tooltip>
          )}
        </Space>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
      render: (time) => new Date(time).toLocaleString()
    },
    {
      title: '操作',
      key: 'actions',
      width: 200,
      fixed: 'right',
      render: (_, record) => (
        <Space wrap>
          <Tooltip title="预览">
            <Button
              type="text"
              icon={<EyeOutlined />}
              onClick={() => handlePreview(record)}
            />
          </Tooltip>
          <Tooltip title="使用">
            <Button
              type="text"
              icon={<CopyOutlined />}
              onClick={() => handleUseComponent(record)}
            />
          </Tooltip>
          <Tooltip title="评分">
            <Button
              type="text"
              icon={<HeartOutlined />}
              onClick={() => handleShowRateModal(record)}
            />
          </Tooltip>
          <Tooltip title="编辑">
            <Button
              type="text"
              icon={<EditOutlined />}
              onClick={() => handleEdit(record)}
            />
          </Tooltip>
          <Popconfirm
            title="确定要删除此组件吗？"
            onConfirm={() => handleDelete(record)}
          >
            <Tooltip title="删除">
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
              />
            </Tooltip>
          </Popconfirm>
        </Space>
      )
    }
  ]

  // 事件处理函数
  const handleSearch = (keyword: string) => {
    const newQuery = { ...query, keyword, current: 1 }
    setQuery(newQuery)
    fetchLibraries(newQuery)
  }

  const handleTabChange = (key: string) => {
    setActiveTab(key)
    let newQuery = { ...query, current: 1 }
    
    switch (key) {
      case 'recommended':
        newQuery.isRecommended = true
        break
      case 'data':
        newQuery.componentType = 'DATA_COMPONENT'
        break
      case 'chart':
        newQuery.componentType = 'CHART_COMPONENT'
        break
      default:
        delete newQuery.isRecommended
        delete newQuery.componentType
    }
    
    setQuery(newQuery)
    fetchLibraries(newQuery)
  }

  const handleCategorySelect = (selectedKeys: React.Key[]) => {
    const categoryId = selectedKeys[0] as number
    setSelectedCategoryId(categoryId)
    
    const newQuery = { ...query, categoryId, current: 1 }
    setQuery(newQuery)
    fetchLibraries(newQuery)
  }

  const handleTableChange = (page: any) => {
    const newQuery = {
      ...query,
      current: page.current,
      size: page.pageSize
    }
    setQuery(newQuery)
    fetchLibraries(newQuery)
  }

  const handlePreview = (record: ComponentLibrary) => {
    // 实现预览功能
    message.info(`预览组件: ${record.displayName}`)
  }

  const handleUseComponent = async (record: ComponentLibrary) => {
    try {
      const response = await fetch(`/api/component-library/${record.id}/use`, {
        method: 'POST'
      })
      
      if (response.ok) {
        message.success('组件使用成功')
        // 刷新使用次数
        fetchLibraries()
      } else {
        message.error('使用组件失败')
      }
    } catch (error) {
      console.error('使用组件失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleShowRateModal = (record: ComponentLibrary) => {
    setSelectedLibrary(record)
    rateForm.setFieldsValue({ rating: record.rating })
    setRateModalVisible(true)
  }

  const handleRate = async () => {
    try {
      const values = await rateForm.validateFields()
      const response = await fetch(`/api/component-library/${selectedLibrary?.id}/rate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rating: values.rating })
      })
      
      if (response.ok) {
        message.success('评分成功')
        setRateModalVisible(false)
        fetchLibraries()
      } else {
        message.error('评分失败')
      }
    } catch (error) {
      console.error('评分失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleEdit = (record: ComponentLibrary) => {
    // 实现编辑功能
    message.info(`编辑组件: ${record.displayName}`)
  }

  const handleDelete = async (record: ComponentLibrary) => {
    try {
      const response = await fetch(`/api/component-library/${record.id}`, {
        method: 'DELETE'
      })
      
      if (response.ok) {
        message.success('删除成功')
        fetchLibraries()
      } else {
        message.error('删除失败')
      }
    } catch (error) {
      console.error('删除失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handlePublish = () => {
    setPublishModalVisible(true)
  }

  const handlePublishSubmit = async () => {
    try {
      const values = await publishForm.validateFields()
      const response = await fetch('/api/component-library/publish', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values)
      })
      
      if (response.ok) {
        message.success('发布成功')
        setPublishModalVisible(false)
        publishForm.resetFields()
        fetchLibraries()
      } else {
        message.error('发布失败')
      }
    } catch (error) {
      console.error('发布失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleCreateFromLibrary = () => {
    setCreateModalVisible(true)
  }

  const handleCreateSubmit = async () => {
    try {
      const values = await createForm.validateFields()
      const response = await fetch(`/api/component-library/${values.libraryId}/create`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ newName: values.newName })
      })
      
      if (response.ok) {
        const result = await response.json()
        message.success(result.message)
        setCreateModalVisible(false)
        createForm.resetFields()
      } else {
        message.error('创建失败')
      }
    } catch (error) {
      console.error('创建失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleBatchDelete = async () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请选择要删除的组件')
      return
    }
    
    try {
      const response = await fetch('/api/component-library/batch-delete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: selectedRowKeys })
      })
      
      if (response.ok) {
        message.success('批量删除成功')
        setSelectedRowKeys([])
        fetchLibraries()
      } else {
        message.error('批量删除失败')
      }
    } catch (error) {
      console.error('批量删除失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleExport = async () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请选择要导出的组件')
      return
    }
    
    try {
      const response = await fetch('/api/component-library/export', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: selectedRowKeys })
      })
      
      if (response.ok) {
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `component-library-${Date.now()}.json`
        a.click()
        window.URL.revokeObjectURL(url)
        message.success('导出成功')
      } else {
        message.error('导出失败')
      }
    } catch (error) {
      console.error('导出失败:', error)
      message.error('网络错误，请重试')
    }
  }

  const handleImport = () => {
    setImportModalVisible(true)
  }

  // 行选择配置
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(selectedRowKeys)
    }
  }

  return (
    <div style={{ padding: '24px' }}>
      {/* 统计信息 */}
      {stats && (
        <Row gutter={16} style={{ marginBottom: '24px' }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="组件总数"
                value={stats.totalComponents}
                prefix={<FireOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="数据组件"
                value={stats.dataComponents}
                prefix={<EyeOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="图表组件"
                value={stats.chartComponents}
                prefix={<StarOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="总使用次数"
                value={stats.totalUsage}
                prefix={<HeartOutlined />}
              />
            </Card>
          </Col>
        </Row>
      )}

      {/* 推荐组件 */}
      {recommendedComponents.length > 0 && (
        <Card 
          title="推荐组件" 
          style={{ marginBottom: '24px' }}
          extra={
            <Button 
              type="link" 
              onClick={() => handleTabChange('recommended')}
            >
              查看更多
            </Button>
          }
        >
          <Row gutter={16}>
            {recommendedComponents.map(component => (
              <Col span={4} key={component.id}>
                <Card
                  size="small"
                  hoverable
                  cover={
                    component.thumbnailUrl ? (
                      <Image
                        src={component.thumbnailUrl}
                        height={120}
                        style={{ objectFit: 'cover' }}
                        preview={false}
                      />
                    ) : (
                      <div 
                        style={{
                          height: 120,
                          background: '#f5f5f5',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        <StarOutlined style={{ fontSize: '24px', color: '#ccc' }} />
                      </div>
                    )
                  }
                  actions={[
                    <Tooltip title="使用组件">
                      <CopyOutlined onClick={() => handleUseComponent(component)} />
                    </Tooltip>,
                    <Tooltip title="预览">
                      <EyeOutlined onClick={() => handlePreview(component)} />
                    </Tooltip>
                  ]}
                >
                  <Card.Meta
                    title={component.displayName}
                    description={
                      <div>
                        <div style={{ marginBottom: '4px' }}>
                          <Rate disabled value={component.rating} allowHalf />
                        </div>
                        <div style={{ fontSize: '12px', color: '#666' }}>
                          使用 {component.usageCount} 次
                        </div>
                      </div>
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </Card>
      )}

      {/* 主要内容区域 */}
      <Row gutter={24}>
        {/* 左侧分类树 */}
        <Col span={5}>
          <Card title="组件分类" size="small">
            {categoryTree.length > 0 ? (
              <Tree
                treeData={categoryTree}
                onSelect={handleCategorySelect}
                selectedKeys={selectedCategoryId ? [selectedCategoryId] : []}
              />
            ) : (
              <Empty 
                image={Empty.PRESENTED_IMAGE_SIMPLE} 
                description="暂无分类" 
              />
            )}
          </Card>
        </Col>

        {/* 右侧主内容 */}
        <Col span={19}>
          <Card>
            {/* 顶部操作栏 */}
            <div style={{ marginBottom: '16px' }}>
              <Row justify="space-between" align="middle">
                <Col>
                  <Space>
                    <Search
                      placeholder="搜索组件名称、描述、标签"
                      allowClear
                      style={{ width: 300 }}
                      onSearch={handleSearch}
                    />
                  </Space>
                </Col>
                <Col>
                  <Space>
                    <Button
                      type="primary"
                      icon={<PlusOutlined />}
                      onClick={handlePublish}
                    >
                      发布组件
                    </Button>
                    <Button
                      icon={<CopyOutlined />}
                      onClick={handleCreateFromLibrary}
                    >
                      从库创建
                    </Button>
                    <Button
                      icon={<ImportOutlined />}
                      onClick={handleImport}
                    >
                      导入
                    </Button>
                    <Button
                      icon={<ExportOutlined />}
                      disabled={selectedRowKeys.length === 0}
                      onClick={handleExport}
                    >
                      导出
                    </Button>
                    <Popconfirm
                      title="确定要批量删除选中的组件吗？"
                      onConfirm={handleBatchDelete}
                      disabled={selectedRowKeys.length === 0}
                    >
                      <Button
                        danger
                        icon={<DeleteOutlined />}
                        disabled={selectedRowKeys.length === 0}
                      >
                        批量删除
                      </Button>
                    </Popconfirm>
                    <Button
                      icon={<ReloadOutlined />}
                      onClick={refreshData}
                    >
                      刷新
                    </Button>
                  </Space>
                </Col>
              </Row>
            </div>

            {/* 类型筛选标签 */}
            <Tabs activeKey={activeTab} onChange={handleTabChange}>
              <TabPane tab="全部组件" key="all" />
              <TabPane tab="推荐组件" key="recommended" />
              <TabPane tab="数据组件" key="data" />
              <TabPane tab="图表组件" key="chart" />
            </Tabs>

            {/* 组件列表表格 */}
            <Table
              rowKey="id"
              columns={columns}
              dataSource={libraries}
              loading={tableLoading}
              pagination={{
                ...pagination,
                onChange: (page, pageSize) => handleTableChange({ current: page, pageSize })
              }}
              rowSelection={rowSelection}
              scroll={{ x: 1500 }}
              size="middle"
            />
          </Card>
        </Col>
      </Row>

      {/* 发布组件弹窗 */}
      <Modal
        title="发布组件"
        open={publishModalVisible}
        onOk={handlePublishSubmit}
        onCancel={() => setPublishModalVisible(false)}
        width={600}
      >
        <Form form={publishForm} layout="vertical">
          <Form.Item
            name="name"
            label="组件名称"
            rules={[{ required: true, message: '请输入组件名称' }]}
          >
            <Input placeholder="请输入组件名称" />
          </Form.Item>
          <Form.Item
            name="displayName"
            label="显示名称"
            rules={[{ required: true, message: '请输入显示名称' }]}
          >
            <Input placeholder="请输入显示名称" />
          </Form.Item>
          <Form.Item
            name="componentType"
            label="组件类型"
            rules={[{ required: true, message: '请选择组件类型' }]}
          >
            <Select options={componentTypeOptions} placeholder="请选择组件类型" />
          </Form.Item>
          <Form.Item
            name="categoryId"
            label="组件分类"
            rules={[{ required: true, message: '请选择组件分类' }]}
          >
            <Select placeholder="请选择组件分类">
              {categories.map(category => (
                <Select.Option key={category.id} value={category.id}>
                  {category.displayName}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="description" label="描述">
            <TextArea rows={4} placeholder="请输入组件描述" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 从库创建弹窗 */}
      <Modal
        title="从库创建组件"
        open={createModalVisible}
        onOk={handleCreateSubmit}
        onCancel={() => setCreateModalVisible(false)}
      >
        <Form form={createForm} layout="vertical">
          <Form.Item
            name="libraryId"
            label="选择组件库"
            rules={[{ required: true, message: '请选择组件库' }]}
          >
            <Select placeholder="请选择组件库">
              {libraries.map(library => (
                <Select.Option key={library.id} value={library.id}>
                  {library.displayName}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="newName"
            label="新组件名称"
            rules={[{ required: true, message: '请输入新组件名称' }]}
          >
            <Input placeholder="请输入新组件名称" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 评分弹窗 */}
      <Modal
        title="组件评分"
        open={rateModalVisible}
        onOk={handleRate}
        onCancel={() => setRateModalVisible(false)}
      >
        <Form form={rateForm} layout="vertical">
          <Form.Item name="rating" label="评分">
            <Rate allowHalf />
          </Form.Item>
        </Form>
      </Modal>

      {/* 导入弹窗 */}
      <Modal
        title="导入组件"
        open={importModalVisible}
        onCancel={() => setImportModalVisible(false)}
        footer={null}
      >
        <Upload.Dragger
          name="file"
          multiple={false}
          action="/api/component-library/import"
          onChange={(info) => {
            const { status } = info.file
            if (status === 'done') {
              message.success(`${info.file.name} 文件导入成功`)
              setImportModalVisible(false)
              fetchLibraries()
            } else if (status === 'error') {
              message.error(`${info.file.name} 文件导入失败`)
            }
          }}
        >
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">支持单个文件上传，仅支持JSON格式文件</p>
        </Upload.Dragger>
      </Modal>
    </div>
  )
}

export default ComponentLibraryManagement